<script setup lang="ts">
import {ContentWrapNoHeaderLine} from '@/components/ContentWrap'
import {Table} from '@/components/Table'
import {
  ElButton,
  ElSpace,
  ElDivider,ElMessageBox, ElMessage
} from 'element-plus'
import {reactive, ref, h, watch} from 'vue'
import {useTable} from "@/hooks/web/useTable";
import {OnceData} from "@/api/snapshot/once/types";
import {getOnceListApi, checkOnceDetailApi, backOnceListApi} from "@/api/snapshot/once/index";
import {Pagination, TableColumn} from "@/types/table";


const columns = reactive<TableColumn[]>([
  {
    field: 'id',
    label: '操作编号',
    search: true,
    visible: true,
    className: ''
  }, {
    field: 'company_id',
    label: '组织编号',
    search: true,
    visible: true,
    className: ''
  }, {
    field: 'user_id',
    label: '秘文端编号',
    visible: true,
    className: ''
  },{
    field: 'data_ids',
    label: '工端编号',
    search: true,
    visible: true,
    className: ''
  }, {
    field: 'time',
    label: '时间',
    search: true,
    visible: true,
    className: ''
  }, {
    field: 'file_type',
    label: '操作类型',
    search: true,
    visible: true,
    className: ''
  }, {
    field: 'file_size',
    label: '文件类型',
    search: true,
    visible: true,
    className: ''
  }, {
    field: 'file_size',
    label: '文件大小',
    search: true,
    visible: true,
    className: ''
  }, {
    field: 'file_id',
    label: '文件编号',
    search: true,
    visible: true,
    className: ''
  }, {
    field: 'file_name',
    label: '文件名',
    search: true,
    visible: true,
    className: ''
  }, {
    field: 'file_path',
    label: '文件路径',
    search: true,
    visible: true,
    className: ''
  }, {
    field: 'action',
    label: '操作',
    visible: true,
    className: ''
  }
])

const {register, tableObject, methods} = useTable<OnceData>({
  getListApi: getOnceListApi,
  response: {
    list: 'list',
    total: 'total'
  }
})
const paginationObj = ref<Pagination>()
watch(() => tableObject.total,
    (val) => {
      if (val > 0) {
        paginationObj.value = {
          total: tableObject.total
        }
      } else {
        paginationObj.value = undefined
      }
    })
const {getList} = methods
getList()

const spacer = h(ElDivider, {direction: 'vertical'})

const selectedCount = ref(0)
const multipleSelection = ref<OnceData[]>([])
const handleSelectionChange = (val: OnceData[]) => {
  multipleSelection.value = val
  selectedCount.value = val?.length || 0
}


const handleCheckButton = (row: OnceData) => {
  tableObject.currentRow = row
  ElMessageBox.confirm("确认验证吗？", '', {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: 'warning'
  }).then(async () => {
    checkOnceDetailApi(row).then(res=>{
      ElMessage.success(res.msg);
    })
  }).catch(() => {
    console.log("取消操作");
  })
}
const handleBackButton = (row: OnceData) => {
  tableObject.currentRow = row
  ElMessageBox.confirm("确认回退吗？", '', {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: 'warning'
  }).then(async () => {
    backOnceListApi(row).then(res=>{
      ElMessage.success(res.msg);
    })
  }).catch(() => {
    console.log("取消操作");
  })
}

</script>

<template>
  <ContentWrapNoHeaderLine title="单文件版本">
    <div class="">
      <Table border
          v-model:pageSize="tableObject.page_size"
          v-model:currentPage="tableObject.page_index"
          :columns="columns"
          :data="tableObject.tableList"
          :loading="tableObject.loading"
          :pagination="paginationObj"
          @register="register"
          @select="handleSelectionChange"
          @select-all="handleSelectionChange"
      >
        <template #action="{row}">
          <el-space :size="6" :spacer="spacer">
            <ElButton type="primary" link @click="handleCheckButton(row)">
              验证
            </ElButton>
            <ElButton type="primary" link @click="handleBackButton(row)">
              回退
            </ElButton>
          </el-space>
        </template>
      </Table>
    </div>
  </ContentWrapNoHeaderLine>
</template>
